<div class="field-wrapper" [ngClass]="{'flex-start': mutipleFile.length}">
    <label class="label" *ngIf="!componentData.extends?.noLabelTxt">{{componentData.labelText}}</label>
    <ng-container *ngIf="!componentData.disabled;else disabledTpl">
        <div class="field-control" [zeprideAuthority]="zeprideAuthorityData"
            [ngClass]="{'has-form-error': getComponentError(componentData.identifyId)}" nz-tooltip
            [nzTooltipTitle]="componentData.extends.tooltip">
            <nz-tabset *ngIf="mutipleFile.length">
                <nz-tab [nzTitle]="item.title" *ngFor="let item of mutipleFile" [nzDisabled]="!isAuthorized">
                    <div class="img-p">
                        <nz-upload *ngIf="item.fileList.length<item.maxCount" [nzAction]="uploadService.uploadAction"
                            [nzHeaders]="uploadService.headers" [nzShowUploadList]="false"
                            [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event, item)" nzName="file"
                            [nzDisabled]="!isAuthorized || componentData.readonly" [nzDisabled]="loading">
                            <div class="upload-btn">
                                <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
                                <div style="margin-top: 8px">点击上传</div>
                            </div>
                        </nz-upload>
                        <div class="file-item" *ngFor="let imgItem of item.fileList; let index = index">
                            <div class="img-item">
                                <img [src]="imgItem.url" *ngIf="imgItem.fileType.indexOf('image')> -1">
                                <div class="file-type-base"
                                    [ngClass]="{'file-type-pdf': imgItem.fileType.indexOf('pdf')> -1 , 'file-type-word': imgItem.fileType.indexOf('word')> -1 , 'file-type-excel': imgItem.fileType.indexOf('sheet')> -1 , 'file-type-zip': imgItem.fileType.indexOf('zip')> -1 }"
                                    *ngIf="imgItem.fileType.indexOf('image') < 0">
                                    <i class="iconfont "
                                        [ngClass]="{'icon-file-pdf-line': imgItem.fileType.indexOf('pdf')> -1, 'icon-file-excel-line': imgItem.fileType.indexOf('sheet')> -1, 'icon-file-word-line': imgItem.fileType.indexOf('word')> -1, 'icon-folder-zip-line': imgItem.fileType.indexOf('zip')> -1}"></i>
                                </div>
                                <div class="ac-p">
                                    <a nz-button nzType="link" nzSize="large" (click)="downloadFile(imgItem)">
                                        <i class="iconfont icon-download-2-line"></i>
                                    </a>
                                    <a nz-button *ngIf="isAuthorized && !componentData.readonly" nzType="link"
                                        nzSize="large" (click)="delImageItem(item, index)">
                                        <i class="iconfont icon-delete-bin-5-line"></i>
                                    </a>
                                </div>
                            </div>
                            <span nz-tooltip [nzTooltipTitle]="imgItem.name">{{imgItem.shortName}}</span>
                        </div>
                    </div>
                </nz-tab>
            </nz-tabset>

            <div style="display: flex;" *ngIf="mutipleFile.length == 0">
                <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                    <input nz-input type="text" placeholder="文件名称" [disabled]="true" [(ngModel)]="fileObj.name" />
                </nz-input-group>
                <ng-template #suffixIconButton>
                    <nz-upload [nzAction]="uploadService.uploadAction" [nzHeaders]="uploadService.headers"
                        [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload" (nzChange)="handleChangeOne($event)"
                        nzName="file" [nzDisabled]="!isAuthorized || componentData.readonly" [nzDisabled]="loading">
                        <button nz-button nzType="primary" [disabled]="!isAuthorized || componentData.readonly">
                            <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'upload'"></i>
                            上传文件
                        </button>
                    </nz-upload>
                </ng-template>
                <a nz-button nzType="link" [disabled]="(!fileObj || !fileObj.name)" (click)="downloadFile(fileObj)">
                    <i class="iconfont icon-download-2-line"></i>
                </a>
                <a nz-button nzType="link"
                    [disabled]="(!fileObj || !fileObj.name) || !isAuthorized || componentData.readonly" nzDanger
                    (click)="cleanUploadFile()">
                    <i class="iconfont icon-delete-bin-5-line"></i>
                </a>
            </div>
        </div>
    </ng-container>
    <span class="error-tip" *ngIf="getComponentError(componentData.identifyId)">
        <ng-container *ngTemplateOutlet="errorTpl"></ng-container>
    </span>
</div>
<ng-template #errorTpl>{{getErrorMsg(componentData.identifyId)}}</ng-template>
<ng-template #contentTemplate>
    <div class="popover-content">
        <div>近期更正</div>
        <div>更正时间：{{dataChangeLog.time | date: 'yyyy年MM月dd日 HH:mm'}}</div>
        <div>更正内容：由“<span class="font-red">{{getChangeLogSource()}}</span>”更正为“<span
                class="font-bule">{{getChangeLogTarget()}}</span>”
        </div>
    </div>
</ng-template>

<ng-template #disabledTpl>
    <div class="field-control">
        <ng-container *ngIf="mutipleFile.length == 0">
            {{fileObj.name}}
            <a class="file-download" nz-button nzType="link" nzSize="large" [href]="fileObj.url" download>
                <i class="iconfont icon-download-2-line"></i>
            </a>
        </ng-container>

        <ng-container *ngIf="mutipleFile.length > 0">
            <nz-tabset>
                <nz-tab [nzTitle]="file.title" *ngFor="let file of mutipleFile">
                    <div class="file-readonly-wrapper">
                        <div class="file-item" *ngFor="let item of file.fileList; let index = index">
                            <div class="img-item">
                                <img [src]="item.url" *ngIf="item.fileType.indexOf('image')> -1">
                                <div class="file-type-base"
                                    [ngClass]="{'file-type-pdf': item.fileType.indexOf('pdf')> -1 , 'file-type-word': item.fileType.indexOf('word')> -1 , 'file-type-excel': item.fileType.indexOf('sheet')> -1 , 'file-type-zip': item.fileType.indexOf('zip')> -1 }"
                                    *ngIf="item.fileType.indexOf('image') < 0">
                                    <i class="iconfont "
                                        [ngClass]="{'icon-file-pdf-line': item.fileType.indexOf('pdf')> -1, 'icon-file-excel-line': item.fileType.indexOf('sheet')> -1, 'icon-file-word-line': item.fileType.indexOf('word')> -1, 'icon-folder-zip-line': item.fileType.indexOf('zip')> -1}"></i>
                                </div>
                            </div>
                            <div class="file-item-btns">
                                <a class="file-download" [href]="item.url" download>
                                    <i class="iconfont icon-download-2-line"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </nz-tab>
            </nz-tabset>
        </ng-container>
        <i *ngIf="dataChangeLog" class="iconfont icon-file-list-2-line icon-data-change" nz-popover
            [nzPopoverContent]="contentTemplate"></i>
    </div>

</ng-template>